<template>
<div class="bg-white">
  <div class="form-wrap">
    <div class="displayflex form-item" :class="{'focus-line':telFocus}">
      <i class="iconfont icon-phone"></i>
      <div class="flex1">
        <input type="tel" placeholder="请输入手机号码"
          @focus="telFocus=true" 
          @blur="telFocus=false"
          @keyup.enter="getCode"
          v-model.trim="tel">
      </div>
    </div>
    <div class="displayflex form-item" :class="{'focus-line':codeFocus}">
      <i class="iconfont icon-verification-c"></i>
      <div class="flex1  v-code-item">
        <input type="tel" placeholder="请输入短信验证码"
          @focus="codeFocus=true" 
          @blur="codeFocus=false"
          @keyup.enter="goNext"
          v-model.trim="code">
      </div>
      <button class="v-btn" v-if="showBtn" @click="getCode">获取验证码</button>
      <button class="v-btn" v-else>{{count}}秒</button>
    </div>
    <!-- 都有值去掉gray -->
    <div class="login-btn gray" v-if="this.tel == '' || this.code == ''">下一步</div>
    <div class="login-btn" v-else @click="goNext">下一步</div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      showLoad:false,
      tel:'',
      code:'',

      showBtn: true,
      count: '',
      timer: null,

      telFocus:false,
      codeFocus:false,
    };
  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
  },
  created() {
    
  },
  methods:{
    startTimer(){
    const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.showBtn = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showBtn = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },

    getCode(){
      var reg = /^1[345789]\d{9}$/;
      if (this.tel == "" || !this.tel) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写手机号码"
        });
        return false;
      } else if (!reg.test(this.tel)) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写正确手机号码"
        });
        return false;
      }

      let query = {
        UserName : this.tel
      }
      this.showLoad = true;
      this.startTimer();
      this.Ajax.post('UserService/SentSmsCode',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: resp.message,
          });
        }else{
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      });
    },

    goNext(){
      var reg = /^\d{4}$/;

      if (this.code == "" || !this.code) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写验证码"
        });
        return false;
      } 

      if (!reg.test(this.code)) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "验证码为4位数字"
        });
        return false;
      }
        
      let query = {
        UserName : this.tel,
        SmsCode : this.code,
      }

      this.showLoad = true;
      this.Ajax.post('UserService/CheckValidCode',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          sessionStorage.setItem('changeAccount', this.tel)
          sessionStorage.setItem('smsCode', this.code)
          this.$router.push({
            path:'reset'
          });
        }else{
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      });

    }
  }
}
</script>